<template>
   <!-- {{ useCount.count }}
   {{ useCount.doubleCount }} -->
  {{ count }}
{{ doubleCount }}  
  <button @click="fn1">点我1</button>
  <button @click="fn2">点我2</button>
  <button @click="fn3">点我3</button>
</template>

<script setup lang="ts">
import {useCounterStore} from "@/stores/counter"
import { useLifecycle } from "element-plus/es/components/slider/src/composables/use-lifecycle.mjs"
// import { DiffieHellmanGroup } from "crypto"
import { storeToRefs } from "pinia"

const useCount=useCounterStore()
//正确解构：保持响应式（如果不带失去响应式storeToRefs）
const {count,doubleCount} =storeToRefs(useCount)
//直接改：
function fn1(){
    useCount.increment()
}
function fn2(){
   useCount.$patch({
    count:100,
    name:"100"
   })
}
function fn3(){
    useCount.$patch((state)=>{
        state.count*=10
    })
}
//方式二:批量改
// useCount.$patch({
//     count:100,
//    name:" "
// })
//方式二：state={count:1,name:"zs"}
// useCount.$patch((state)=>{
//     state.count*=10;
// })


</script>

<style scoped>

</style>